<template>
  <div class="MyBook">
    <ul>
      <li>
        <a href="#">
          <span>闲喜欢的书</span>
          <i></i>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyBook',

  data() {
    return {
      
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.MyBook{
  width:100%;
  &>ul{
    display: flex;
    flex-wrap: wrap;
    li{
      width:32%;
      height:2.8rem;
      border:1px solid #ccc;
      position: relative;
      border-radius: .1rem;
      background:-webkit-linear-gradient(top, #022 0%, #FEE 100%);
      padding-top:.15rem;
      a{
        display: block;
        text-align: center;
        img{
          width:100%;
          height:100%;
        }
        span{
          font-size:.12rem;
          color:#f5f5f5;
        }
      }
    }
  }
}
</style>